<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/xyz.css">    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            overflow: hidden;
            height: 100%;
        }

        /* 设置滚动条的样式 */

        ::-webkit-scrollbar {
            width: 9px;
        }

        /* 滚动槽 */

        ::-webkit-scrollbar-track {
            box-shadow: inset 006px rgba(0, 0, 0, 0.3);
        }

        /* 滚动条滑块 */

        ::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1);
            box-shadow: inset 006px rgba(0, 0, 0, 0.5);
        }

        ::-webkit-scrollbar-thumb:window-inactive {
            background: #5cb85c;
        }

        .left {
            width: 70%;
            height: calc(100vh);
            background-color: #eeeeeede;
            float: left;
            position: relative;
            /*overflow-y: scroll;*/
        }

        .right {
            width: 30%;
            height: calc(100vh);
            float: left;
            border-left: 1px solid #eee;
            box-shadow: -2px 0px 15px #eee;
            box-sizing: border-box;
        }

        .todo-item {
            height: 14px;
            font-size: 12px;
            padding: 4px;
            border-bottom: 1px solid white;
            border-top: 1px solid white;
        }

        .delline {
            text-decoration: line-through;
        }

        .todo-item:focus {
            border-bottom: 1px solid #ffe7c7;
            border-top: 1px solid #ffe7c7;
        }

        .todo-item:hover {
            border-bottom: 1px solid #ffe7c7;
            border-top: 1px solid #ffe7c7;
        }

        .showbox {
            position: absolute;
            padding: 20px;
        }

        .showbox .closebtn {
            position: absolute;
            top: 4px;
            left: 404px;
            opacity: 0.4;
            display: block;
            width: 30px;
            height: 30px;
            background-color: black;
            border-radius: 25px;
            text-align: center;
        }

        .showbox .closebtn:hover {
            opacity: 1;
        }

        .showbox .box {
            box-shadow: 2px 2px 55px rgb(158, 157, 157);
            background-color: transparent;

        }

        .triangle-down {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #BD2D30;
            margin: 0 auto;
        }

        .btnbox a:hover {
            background-color: #BD2D30;
            color: white;
        }

        header {
            height: 60px;
            background-color: white;
        }

        .bdbox {
            background-color: white;
            display: flex;
            width: 100%;
            position: relative;
            box-sizing: border-box;
        }

        .bdbox_a {
            background-color: white;
            display: flex;
            width: 100%;
            overflow-y: scroll;
            height: calc(100vh - 103px);
            position: relative;
        }

        .todoweek {
            flex: 1;
            display: flex;
        }

        .weekbox {
            flex: 1;
            text-align: center;
            padding: 10px;
            border-right: 1px solid #ECECEB;
            border-top: 1px solid #ECECEB;
            border-bottom: 1px solid #ECECEB;
            box-sizing: border-box;
        }

        .timebox {
            flex: 1;
            text-align: center;
            padding: 10px;
            border-right: 1px solid #ECECEB;
            border-bottom: 1px solid #ECECEB;
            height: 960px;
            position: relative;
            z-index: 10;
            box-sizing: border-box;
        }

        .left .timeline {
            height: 40px;
        }

        .left .timeline:after {
            content: '';
            border-bottom: #e0e0e0 1px solid;
            position: absolute;
            width: 100%;
            margin-top: -1px;
            z-index: 3;
            pointer-events: none;
        }

        .timetext div {
            height: 40px;
            text-align: right;
            padding-right: 5px;
        }

        .timetext div span {
            font-size: 12px;
            position: relative;
            top: -13px;
        }

        .add_task {
            position: absolute;           
            border-radius: 50%;
            background-color: #DC3545;
            bottom: 20px;
            right: 30px;
            box-shadow: 0px 5px 15px rgb(158, 157, 157);
            z-index: 10;
            width: 60px;
            height: 60px;           
            display: flex;
            align-items: center;
            justify-content: center;
        }      
        .add_task:hover{
            opacity: 0.8;
        }
    </style>
    <script>
        function getElementLeft(element) {
            var actualLeft = element.offsetLeft;
            var current = element.offsetParent;

            while (current !== null) {
                actualLeft += current.offsetLeft;
                current = current.offsetParent;
            }

            return actualLeft;
        }

        function getElementTop(element) {
            var actualTop = element.offsetTop;
            var current = element.offsetParent;

            while (current !== null) {
                actualTop += current.offsetTop;
                current = current.offsetParent;
            }

            return actualTop;
        }
        var ismove = false;
        var mvtop = 0;
        var mvleft = 0;
        function clickdivea(e) {
            var idx = document.getElementById("idbox");
            mvtop = e.clientY - getElementTop(idx);
            mvleft = e.clientX - getElementLeft(idx);
            ismove = true;
        }
        function clickdivb(e) {
            ismove = false;
        }
        function movediva(e) {
            if (ismove) {
                var idx = document.getElementById("idbox");
                idx.style = "top:" + (e.clientY - mvtop) + "px;left:" + (e.clientX - mvleft) + "px;";
            }
        }       
    </script>
</head>

<body onload="bodyload()">
    <div class="left" id="app">
        <header>标题状态栏</header>
        <div class="bdbox">
            <div class="todoweek">
                <div style="box-sizing: border-box;border: 1px solid #ECECEB;flex:none;width:50px;"></div>
                <div class="weekbox week0">周日</div>
                <div class="weekbox week1">周一</div>
                <div class="weekbox week2">周二</div>
                <div class="weekbox week3">周三</div>
                <div class="weekbox week4">周四</div>
                <div class="weekbox week5">周五</div>
                <div class="weekbox week6">周六</div>
                <div style="box-sizing: border-box;border-top: 1px solid #ECECEB;flex:none;width:8px;"></div>
            </div>
        </div>
        <div class="bdbox_a">
            <div id="id_timetext" class="timetext" style="box-sizing: border-box;flex:none;width:50px; border-right: 1px solid #ECECEB">
                <div></div>
            </div>
            <div class="bdbox">
                <div id="id_timelinebox" style="height:100%;">
                    
                </div>
                <div class="timebox week0"></div>
                <div class="timebox week1"></div>
                <div class="timebox week2"></div>
                <div class="timebox week3">
                    <div id="id_rgmenu" style="background-color:seagreen;position: absolute;left:0px;width:85%;height:60px; top: 30px;">
                        
                    </div>
                </div>
                <div class="timebox week4"></div>
                <div class="timebox week5"></div>
                <div class="timebox week6"></div>
            </div>
        </div>

        <div class="add_task">
            <svg xmlns="http://www.w3.org/2000/svg" style="width:20px;height:20px;" version="1.1">
                <line x1="10" y1="0" x2="10" y2="20" style="stroke:white;stroke-width:2" />
                <line x1="0" y1="10" x2="20" y2="10" style="stroke:white;stroke-width:2" />
            </svg>
        </div>
    </div>

    </div>
    <div class="right">
        <div>
            <div>
                <h2 id="id_date" style="background-color:#5cb85c;color:white; text-align:center;box-shadow:0px 2px 1px #eee"></h2>
            </div>
            <div style="margin-top:5px;padding:5px;">
                <div class="todo-item delline" contenteditable="true"></div>
                <div class="todo-item" contenteditable="true">
                    <input type="checkbox" style="margin: auto 5px;" />
                </div>
                <div class="todo-item" contenteditable="true"></div>
                <div class="todo-item" contenteditable="true"></div>
            </div>
        </div>
    </div>
    <div id="idbox" class="showbox" style="display:none;">
        <a class="closebtn">
            <svg xmlns="http://www.w3.org/2000/svg" style="margin:10px;width:10px;height:10px;" version="1.1">
                <line x1="0" y1="0" x2="10" y2="10" style="stroke:white;stroke-width:2" />
                <line x1="10" y1="0" x2="0" y2="10" style="stroke:white;stroke-width:2" />
            </svg>
        </a>
        <div class="box" style="width:400px;">
            <div style="color:white;background-color:#BD2D30; padding:6px; text-align:center; " onmousedown="clickdivea(event)" onmousemove="movediva(event)"
                onmouseup="clickdivb(event)">
                <h2 style="font-size:16px;">测试任务1</h2>
            </div>
            <div style="background-color:white; ">
                <div class="triangle-down"></div>
                <div style="height:160px;">

                </div>
                <div class="btnbox" style="width:100%;height:42px;">
                    <a style="text-align:center;line-height: 40px; display: block; height:41px;float:left; width:50%;border-top:1px solid #E5E5E5;">
                        <span>确定</span>
                    </a>
                    <a style="text-align:center;line-height: 40px; display: block; height:41px;float:left; width:50%;margin-left:-1px;border-top:1px solid #E5E5E5;border-left:1px solid #E5E5E5;">
                        取消
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script src="js/xyz.js"></script>
    <script type="text/javascript">
        function showTime() {
            var datebox = document.getElementById("id_date");
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            datebox.innerHTML = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate() + " " + h + ":" + m + ":" + (s < 10 ? "0" : "") + s;
            t = setTimeout(function () { showTime(); }, 500);
        }
        function genTimeText() {
            var el_timelinebox = document.getElementById("id_timelinebox");
            var el_timetext = document.getElementById("id_timetext");
            for (var i = 1; i < 24; i++) {
                var elitem = document.createElement("div");
                elitem.innerHTML = "<span>" + (i < 10 ? "0" : "") + i + ":00</span>"
                el_timetext.appendChild(elitem);
                var el_tlitem = document.createElement("div");
                el_tlitem.className = "timeline";
                el_timelinebox.appendChild(el_tlitem);
            }
            var el_tlitem = document.createElement("div");
            el_tlitem.className = "timeline";
            el_timelinebox.appendChild(el_tlitem);
        }
        function nowtimeSet() {
            var today = new Date();
            var w = today.getDay();
            var els = document.getElementsByClassName("week" + w);
            for (var i in els) {
                var elitem = els[i];
                elitem.style = "background-color:rgba(0,0,0,0.04);";
                if (elitem.className && elitem.className.indexOf("timebox") == 0) {
                    var timelineel = document.createElement("div");
                    if (elitem.children.length > 0) {
                        timelineel = elitem.children[0];
                    } else {
                        elitem.appendChild(timelineel);
                    }
                    var elh = elitem.clientHeight;
                    var h = today.getHours();
                    var m = today.getMinutes();
                    var daySeconds = h * 3600 + m * 60;
                    var timelinetop = daySeconds / 86400 * elh;
                    timelineel.style = 'border-top:1px solid red; position: absolute;left:0px;width:100%;top:' + timelinetop + 'px;';
                } else {
                    elitem.style = "border-bottom:2px solid #0F96FF;";
                }
            }
            t = setTimeout(function () { nowtimeSet(); }, 60000);
        }
        function addmenu(){
            var menu = new xyz.ctxmenu();
            menu.addMenuItem("test",function(){console.log("test");});
            menu.addMenuItem("test1",function(){console.log("test1");});
            menu.addMenuTo(document.getElementById("id_rgmenu"));
        }
        function bodyload() {
            showTime();
            genTimeText();
            nowtimeSet();
            addmenu();
        }


    </script>

</body>

</html>